/* https://github.com/nzbin/three-dots/blob/master/less/_dot-rolling.less */

.dot-rolling {
  position: relative;
  height: 10px;
  font-size: 10px;
}

.dot-rolling::before {
  content: "⚽";
  display: inline-block;
  position: relative;
  transform: translateX(-25px);
  animation: dot-rolling 3s infinite;
}

@keyframes dot-rolling {
  0% {
    content: "⚽";
    transform: translateX(-25px) rotateZ(0deg);
  }

  16.667% {
    content: "⚽";
    transform: translateX(25px) rotateZ(720deg);
  }

  33.333% {
    content: "⚽";
    transform: translateX(-25px) rotateZ(0deg);
  }

  34.333% {
    content: "🏀";
    transform: translateX(-25px) rotateZ(0deg);
  }

  50% {
    content: "🏀";
    transform: translateX(25px) rotateZ(720deg);
  }

  66.667% {
    content: "🏀";
    transform: translateX(-25px) rotateZ(0deg);
  }

  67.667% {
    content: "🏐";
    transform: translateX(-25px) rotateZ(0deg);
  }

  83.333% {
    content: "🏐";
    transform: translateX(25px) rotateZ(720deg);
  }

  100% {
    content: "🏐";
    transform: translateX(-25px) rotateZ(0deg);
  }
}
